<template>
  {{ appcode }}
  <el-form
      style="max-width: 600px"
      :model="searchParams"
      label-width="auto"
      :label-position="'left'"
  >
    <el-form-item label="appcode">
      <el-input v-model="searchParams.appcode"/>
    </el-form-item>
    <el-form-item label="任务名">
      <el-input v-model="searchParams.taskName"/>
    </el-form-item>
    <el-form-item label="任务状态">
      <el-radio-group v-model="searchParams.taskState" label="任务状态">
        <el-radio-button value="">所有</el-radio-button>
        <el-radio-button value="running">启动</el-radio-button>
        <el-radio-button value="stop">暂停</el-radio-button>
      </el-radio-group>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit" style="width: 200px">查询任务</el-button>
      <el-button type="success" @click="onSubmit" style="width: 200px" fixed="right">新建任务</el-button>
    </el-form-item>
  </el-form>

  <taskSearchResult></taskSearchResult>
</template>

<script setup>
import {onBeforeRouteUpdate, useRoute} from 'vue-router';
import {reactive} from "vue";
import taskSearchResult from "./task/TaskSearchResult.vue";


const route = useRoute();

onBeforeRouteUpdate((to) => {
  searchParams.appcode = to.query.appcode;
});

const searchParams = reactive({
  appcode: route.query.appcode,
  taskName: route.query.taskName,
  taskState: ''
})

</script>

